<template>
	<view @touchmove.stop.prevent="() => {}">
		<!-- 弹出层 -->
		<!-- <view v-if="showModal" class="mask" @click="hideCart"></view> -->
		<u-mask :show="showModal" @click="hideCart"></u-mask>
		<view v-if="showModal" class="modalDlg" :class="{'modalDlg-show': showModal}">
		  <view style="margin-top: 15px" v-if="loading" class="null">
			  <u-loading :show="loading" mode="circle" size="40"></u-loading>
			  <text style="margin-left: 8px;">加载中</text>
		  </view>
		  <view v-if="!loading">
			  <view class="modalDlg_top">
			    <img :src="goodsDetail.thumb_url.length>0?goodsDetail.thumb_url[0].img_Url:''" alt="">
			    <view class="modalDlg_top_right">
			      <view class="modalDlg_top_right_name">
			        <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
			        <span>{{goodsDetail.name}}</span>
			      </view>
			      <view class="cart_price">
			        <span v-if="classifyIndex==-1">￥{{goodsDetail.selling_price}}</span>
			        <span v-if="classifyIndex!=-1">￥{{goodsDetail.goods_spu_info[classifyIndex].price}}</span>
			        <span v-if="classifyIndex==-1">库存：{{goodsDetail.stock}}</span>
			        <span v-if="classifyIndex!=-1">库存：{{goodsDetail.goods_spu_info[classifyIndex].stock}}</span>
			      </view>
			    </view>
			  </view>
			  <!-- <view class="modalDlo_center">
			    <view class="modalDlo_center_tit" v-if="goodsDetail.goods_spu_info.length!=0">规格</view>
			    <view class="modalDlo_center_classify">
			      <view
			        v-for="(item,index) of goodsDetail.goods_spu_info"
			        :key="index" @click="select_classify(item,index)"
			        :class="{selectClassify:index==classifyIndex}"
			      >
			        {{item.spu_name}}
			      </view>
			    </view>
			  </view> -->
			  <view class="modalDlo_bottom">
			  	<view style="padding-bottom: 10px;">购买数量</view>
			  	<u-number-box min="1" v-model="num" @change="numberChange"></u-number-box>		 
			  </view>
			  <button v-if="!userToken" class="join_cart" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">请先登录</button>
			  <view v-else class="join_cart" @click="addCart">加入购物车</view>
		  </view>
		</view>
		<!-- 弹出层结束 -->
		
	</view>
</template>

<script>
	export default{
		name: "cart-dialog",
		props: {
			goodsId: '',
			showModal: ''
		},
		data() {
			return{
				id: '',
				goodsDetail: '',
				classifyIndex: -1,
				classifyId: '',
				num: '',
				loading: true,
				userToken: ''
			}
		},
		watch: {
			goodsId() {
				this.userToken = wx.getStorageSync('userToken')
				if(this.goodsId){
					this.getGoodsDetails(this.goodsId)
				}
			}
		},
		methods: {
			//获取商品详情
			async getGoodsDetails(id){
			  let merchant = wx.getStorageSync('merchant')
			  this.loading = true;
			 /* if (id != this.id){
			    this.classifyId = '';
			    this.classifyIndex = -1;
			  } */
			  let res = await this.$api.getMedicineDetail( {
			    medicine_id: id,
				merchant_id: merchant.merchant_id
			  },this.$baseUrl)
			  if(res.data.level=='success'){
			    this.goodsDetail = res.data.data;
			    this.id = id;
			    this.num=1;
				this.loading = false;
			  } else{
				wx.showToast({
					title: res.data.message,
					icon: 'none'
				})
			  }
			},
			
			//添加到购物车
			async addCart() {
			  const _this = this
			  if (this.num <= 0) {
			    wx.showToast({
			    	title: '商品数量不能为0',
			    	icon: 'none'
			    })
			    return
			  }
			  wx.showLoading({
				  title: '正在加入购物车'
			  })
			  var userToken = wx.getStorageSync('userToken')
			  let res = await this.$api.addShopCart({
			    medicine_id: this.id,
			    num: this.num,
			    user_token: userToken
			  },this.$baseUrl)
			  if (res.data.level == 'success') {
			    wx.hideLoading();
			    this.$emit('hideCartModal',false)
			    wx.showToast({
			    	title: res.data.message,
			    	icon: 'success'
			    })
			  } else {
				wx.hideLoading();
			    wx.showToast({
			    	title: res.data.message,
					icon: 'none'
			    })
			  }
			},
			
			hideCart(){
			  this.$emit('hideCartModal',false)
			  /* this.goodsDetail = ''; */
			},
			
			numberChange(num) {
			  this.num = num.value
			},
			
			//微信授权
			async bindGetUserInfo(){
			    var _this=this;
			    uni.login({
			        success: res =>{
			            let code = res.code;
			            uni.getUserInfo({
			                success: async res => {
								wx.showLoading({
									title: '正在登录'
								})
			                    let params = {
			                        raw_data:res.rawData,
			                        signature:res.signature,
			                        code:code
			                    }
			                    const result = await _this.$api.wxAppLogin(params,this.$baseUrl);
									  wx.hideLoading();
			                    if (result.data.level == 'success'){
			                        uni.setStorageSync('userToken',result.data.data);
										  this.userToken = result.data.data
										  wx.showToast({
										  	title: "登录成功",
										  	icon: "none",
										  	duration: 1500
										  })
			                    } else{
									wx.showToast({
										title: result.data.message,
										icon: "none",
										duration: 1500
									})
								}
			                },
							fail: (res) => {
								wx.hideLoading()
							}
			            })
			        }
			    })
			},
			
		}
	}
</script>

<style scoped lang="scss">
	@import "../../common/css/mixin";
	/* 弹出框 */
	.mask{
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: #000;
	  z-index: 9000;
	  opacity: 0.7;
	}
	.modalDlg{
	  width: 100%;
	  height:45%;
	  position: fixed;
	  bottom:0;
	  left: 0;
	  z-index: 99999;
	  background-color: #ffffff;
	  color: #000000;
	  padding-bottom: 40px;
	  border-radius: 10px 10px 0 0;
	}
	
	.modalDlg_top{
	  padding:10px 25px 5px 10px;
	  /*padding-right:25px;*/
	  display: flex;
	  align-items: center;
	  /*border-bottom: 1px solid #eee;*/
	  height: 30%;
	
	}
	.modalDlg_top>img{
	  width:80px;
	  height: 80px;
	}
	.modalDlg_top_right{
	  margin-left:20px;
	  width:calc(100% - 100px);
	}
	.modalDlg_top_right_name{
	  display: flex;
	  align-items: center;
	  color: #333333
	  span{
	    @include ellipsis(3)
	  }
	}
	.modalDlg_top_right_name_tag{
	  color:purple;
	  display: inline-block;
	  width:50px;
	  text-align: center;
	  border:1px solid purple;
	  font-size: 10px;
	  border-radius: 5px;
	  margin-right:5px;
	}
	.modalDlg_top_right_name_tag+span{
	  width:200px;
	  display: inline-block;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.modalDlo_bottom{
	  margin-left:10px;
	}
	.cart_price{
	  margin-top:15px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center
	}
	.cart_price>span:nth-child(1){
	  color:red;
	}
	.modalDlo_center{
	  max-height: 50%;
	  overflow-x: hidden;
	  overflow-y: scroll;
	}
	.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
	  width:100%;
	  /*max-height: 45%;*/
	}
	.modalDlo_center_classify{
	  display:flex;
	  align-items: center;
	  flex-wrap:wrap;
	  margin:10px;
	  /*padding-bottom: 50px;*/
	}
	.modalDlo_center_classify>view{
	  border:1px solid #eee;
	  padding:2.5px 5px;
	  border-radius: 5px;
	  margin-right:5px;
	  text-align: center;
	}
	.modalDlo_center_tit{
	  padding-left:10px;
	}
	.join_cart{
	  width:100%;
	  background: #ff1f3a;
	  color:#fff;
	  font-size: 20px;
	  text-align: center;
	  line-height: 50px;
	  position: absolute;
	  bottom:0;
	}
	button::after {
	  border: none;
	}
	button {
	  background-color: #fff;
	  line-height: 16px;
	  font-size: 10px;
	  border-radius:0;
	}
	/* 规格 */
	.selectClassify{
	  border:red 1px solid !important;
	  color:red;
	}
	
	.back{
	  background: #ffffff;
	}
	
	.bottom{
	  padding: 30rpx;
	  text-align: center;
	  color: #999999;
	  background: #ffffff;
	}
	
</style>
